<template>
  <div>
    <Breadcrumb style="padding-bottom: 20px">
      <BreadcrumbItem to="/">图书管理后台</BreadcrumbItem>
      <BreadcrumbItem>用户信息</BreadcrumbItem>
    </Breadcrumb>

    <Modal :model-value="updateButton" title="修改信息" footer-hide :closable="false">
      <Form :model="updateForm" :label-width="80">
        <FormItem label="编号:">
          <input v-model="updateForm.id" placeholder="编号" style="width: 80%" readonly />
        </FormItem>
        <FormItem label="用户名:">
          <input v-model="updateForm.username" placeholder="用户名" style="width: 80%" readonly />
        </FormItem>
        <FormItem label="密码:">
          <input v-model="updateForm.password" placeholder="密码" style="width: 80%" readonly />
        </FormItem>
        <FormItem label="性别:">
          <input v-model="updateForm.sex" placeholder="性别" style="width: 80%" readonly />
        </FormItem>

        <FormItem label="邮箱:">
          <input v-model="updateForm.email" placeholder="邮箱" style="width: 80%" readonly />
        </FormItem>

        <FormItem label="电话:">
          <input v-model="updateForm.phone" placeholder="电话" style="width: 80%" readonly />
        </FormItem>

        <FormItem label="可借数量:">
          <input v-model="updateForm.num" placeholder="可借数量" style="width: 80%" />
        </FormItem>
      </Form>
      <div class="demo-form-button">
        <Button type="primary" @click="update()">修改</Button>
        <Button type="primary" style="margin-left: 20px" @click="cancels()">取消</Button>
      </div>
    </Modal>
    <div class="demo-search">
      <Form ref="queryForm" :model="queryForm" inline>
        <FormItem prop="username">
          <Input type="text" v-model="queryForm.username" placeholder="用户名">
            <template #prepend>
              <Icon type="ios-person-outline"></Icon>
            </template>
          </Input>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="handleQuery('queryForm')">查询</Button>
        </FormItem>
      </Form>
    </div>

    <Table border :columns="columns" :data="data"></Table>

    <Page
      :total="total"
      :page-size="size"
      @on-change="changePage"
      :model-value="page"
      show-elevator
      style="padding-top: 20px"
    />

    <GlobalFooter :links="links" :copyright="copyright" />
  </div>
</template>
<script>
import { resolveComponent } from 'vue';
import { getPersonal, getByUsername, updateNum, deleteAll } from '@/api/personalApi';
import { selectReturn } from '@/api/historyApi';
export default {
  data() {
    return {
      addButton: false,
      updateButton: false,
      size: 3,
      page: 1,
      total: 0,
      updateForm: {
        id: '',
        username: '',
        password: '',
        sex: '',
        email: '',
        phone: '',
        num: ''
      },
      columns: [
        {
          title: 'ID',
          key: 'id',
          align: 'center'
        },
        {
          title: '用户名',
          key: 'username',
          align: 'center'
        },
        {
          title: '密码',
          key: 'password',
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          align: 'center'
        },
        {
          title: '邮箱',
          key: 'email',
          align: 'center'
        },
        {
          title: '电话',
          key: 'phone',
          align: 'center'
        },
        {
          title: '借书数量',
          key: 'num',
          align: 'center'
        },

        {
          title: 'Action',
          key: 'action',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                resolveComponent('Button'),
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  onClick: () => {
                    this.show(params.row.username);
                  }
                },
                {
                  default() {
                    return '修改';
                  }
                }
              ),
              h(
                resolveComponent('Button'),
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  onClick: () => {
                    this.remove(params.row);
                  }
                },
                {
                  default() {
                    return '删除';
                  }
                }
              )
            ]);
          }
        }
      ],
      data: [
        {
          id: '',
          username: '',
          password: '',
          sex: '',
          email: '',
          phone: '',
          num: ''
        }
      ],
      links: [
        {
          key: '帮助',
          title: '帮助',
          href: 'https://www.iviewui.com',
          blankTarget: true
        },
        {
          key: 'github',
          icon: 'logo-github',
          href: 'https://github.com/view-design/ViewUIPlus',
          blankTarget: true
        },
        {
          key: '条款',
          title: '条款',
          href: '',
          blankTarget: true
        }
      ],
      copyright: 'Copyright © 2022 View Design All Rights Reserved',
      queryForm: {
        username: ''
      },
      ruleInline: {
        username: [{ required: true, message: 'Please fill in the user name', trigger: 'blur' }]
      }
    };
  },
  methods: {
    update() {
      updateNum(this.updateForm).then((res) => {
        this.$Message.success('修改成功');
        window.setTimeout(function () {
          window.location.reload();
        }, 1000);
      });
      this.updateButton = false;
    },
    cancels() {
      this.updateButton = false;
    },
    show(username) {
      this.updateButton = true;
      getByUsername({ username: username }).then((res) => {
        this.updateForm = res;
      });
    },
    remove(personal) {
      this.$Modal.confirm({
        title: '删除',
        content: '你确认要删除吗?',
        onOk: () => {
          selectReturn({ id: personal.id }).then((res) => {
            if (res) {
              deleteAll(personal).then((res) => {
                this.$Message.success('删除成功');
                window.setTimeout(function () {
                  window.location.reload();
                }, 1000);
              });
            } else {
              this.$Message.error('该用户还要书目未归还,无法删除');
            }
          });
        },
        onCancel: () => {
          this.$Message.success('取消删除');
        }
      });
    },
    changePage(page) {
      getPersonal({ username: this.queryForm.username, page: page, size: this.size }).then((res) => {
        this.data = res.data;
        this.total = res.total;
      });
    },
    handleQuery(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          getPersonal({ username: this.queryForm.username, page: this.page, size: this.size }).then((res) => {
            this.data = res.data;
            this.total = res.total;
          });
        } else {
          this.$Message.error('Fail!');
        }
      });
    }
  },
  created() {
    getPersonal({ username: this.queryForm.username, page: this.page, size: this.size }).then((res) => {
      this.data = res.data;
      this.total = res.total;
    });
  }
};
</script>

<style>
.demo-search {
  text-align: center;
}
.demo-add {
  margin-bottom: 20px;
  text-align: center;
}
.demo-form-button {
  text-align: center;
}
</style>
